<template>
	<view class="content">

		<view class="logo">
			<view class="s1">
				<image :src="vuex_theme.logo"></image>
				<text>{{ vuex_theme.name }}</text>
			</view>
			<view class="s2">
				<image :src="vuex_user.avatar" mode="aspectFill"></image>
				<text @click="nav_show = true">目录</text>
			</view>
		</view>

		<view class="my-ava">
			<image class="image" :src="vuex_user.avatar"></image>
			<view class="s1">
				<text>{{ vuex_user.nickname }}</text>
				<!-- <text @click="goLogout()">退出</text> -->
			</view>
			<!-- <view class="s2">{{ vuex_user.is_shop == 1 ? '商家' : '普通消费者' }}</view> -->
			<view class="s2">{{ parterInfo.level && parterInfo.level.level_name ? parterInfo.level.level_name : '' }}</view>
		</view>

		<view class="nav">
			<view class="title">基本信息</view>
			<u-cell-group :border='false'>
				<u-cell :border='false' url='/pages/my/activity' title="我参与的活动" :isLink='true'></u-cell>
				<u-cell :border='false' url='/pages/my/info' title="个人基本信息" :isLink='true'></u-cell>
				<u-cell :border='false' url='/pages/my/address' title="收货地址管理" :value="is_address"
					:isLink='true'></u-cell>
			</u-cell-group>
		</view>

		<view class="shop" @click="goShop()" v-if="vuex_user.is_shop == 1">
			<view class="s1">提现</view>
			<u-icon name="arrow-right"></u-icon>
		</view>
		<view class="vip" v-if="status!=3||(Object.values(parterInfo).length&&parterInfo.status==0)">
			<view class="s1" style="display: flex;align-items: center;justify-content: space-between;flex:1">
				<view>加入梦想VIP</view>
				<template v-if="!Object.values(parterInfo).length">
					<view :class="status==0?'daishenhe':status==1?'pass':'reject'" v-if="status!=-1">
						{{status==0?'申请中':status==1?'通过':'拒绝'}}
					</view>
				</template>
			</view>
			<view class="quanyi" v-if="status==-1">
				<view style="padding: 52rpx 0 40rpx;">权益</view>
				<view class="text">{{partner_advantage}}</view>
				<view class="but" @click="apply" style="margin-bottom: 0rpx;">
					<view class="s2">
						<text>申 请</text>
					</view>
				</view>
			</view>
			<template v-else>
				<u--image style="margin: 52rpx auto;" :showLoading="true" src="../../static/Illustration.png"
					width="408rpx" height="348rpx" @click="click"></u--image>
				<view class="desc">
					<text v-if="!status">请稍等，兑换卡赋予中...</text>
					<text v-else-if="status==1">恭喜你已拥有成为梦想VIP的资格</text>
					<text v-else-if="status==2">原因： {{reject_reason}}</text>
					<text v-else-if="parterInfo.status==0">账号被冻结</text>
				</view>
				<view class="but" v-if="status==1" @click="becomePartner" style="margin-bottom: 0rpx;">
					<view class="s2">
						<text>加入梦想VIP</text>
					</view>
				</view>
				<view class="but" v-if="status==2" @click="apply">
					<view class="s2">
						<text>重新申请</text>
					</view>
				</view>
				<view class="but" v-if="parterInfo.status==0" @click="contartCustomer" style="margin-bottom: 0rpx;">
					<view class="s2">
						<text>联系客服</text>
					</view>
				</view>
			</template>
		</view>
		<view class="nav" style="margin-bottom: 60rpx;" v-else>
			<view class="title">我的家庭</view>
			<u-cell-group :border='false' v-if="Object.keys(parterInfo).length">
				<u-cell :border='false' title="家庭辈分" :isLink='true' url="/pages/second/levelUp"
					:value="parterInfo.level.level_name"></u-cell>
				<block>
					<u-cell :border='false' v-if="+parterInfo.verify_status==3"
						url="/pages/second/authentication?status=1" title="实名认证" :isLink='true'>
						<view slot="value" style="font-size: 24rpx;color: #7D8592;">
							{{+parterInfo.verify_status|verifyStatus}}
						</view>
					</u-cell>
					<u-cell :border='false' v-else
						:url="(+parterInfo.verify_status==2||+parterInfo.verify_status==1)?'': '/pages/second/authentication'"
						title="实名认证" :isLink='true'>
						<view slot="value" style="font-size: 24rpx;color: #7D8592;">
							{{+parterInfo.verify_status|verifyStatus}}
						</view>
					</u-cell>
				</block>
				<u-cell :border='false' url='/pages/second/protocolList' title="我的协议" :isLink='true'
					:value="+parterInfo.is_file_signed?``:'有未签'"></u-cell>
				<u-cell :border='false' url='/pages/second/notice' title="消息公告" :isLink='true'></u-cell>
				<u-cell :border='false' :url="+parterInfo.status==2?'/pages/second/myTeam':''" title="我的家人"
					:isLink='true'>
					<view slot="value" style="font-size: 24rpx;color: #7677EB;">
						<span v-if="+parterInfo.status!=2">同意协议和实名后可用</span>
					</view>
				</u-cell>
				<u-cell :border='false' :url="+parterInfo.status==2?'/pages/second/myAccountCenter':''" title="账户中心"
					:isLink='true'>
					<view slot="value" style="font-size: 24rpx;color: #7677EB;">
						<span v-if="+parterInfo.status!=2">同意协议和实名后可用</span>
						<view v-else-if="waterList.length" class="handles"> 有待处理申请</view>
					</view>
				</u-cell>
				<u-cell :border='false'
					:url="+parterInfo.status==2?`/pages/second/wechat?parent_id=${parterInfo.id}`:''" title="分享二维码"
					:isLink='true'>
					<view slot="value" style="font-size: 24rpx;color: #7677EB;">
						<span v-if="+parterInfo.status!=2">同意协议和实名后可用</span>
					</view>
				</u-cell>
			</u-cell-group>
		</view>

		<u-popup :show="nav_show" @close="onClose" bgColor='transparent' mode='left'>
			<view class="nav1">
				<view class="title">
					<image :src="vuex_theme.logo"></image>
					<text>超田分享系统</text>
				</view>
				<view class="item" @click="goWeb('Index')">
					<image src="@/static/icon/index-no.png"></image>
					<text>首页</text>
				</view>
				<view class="item" @click="goWeb('Shop')">
					<image src="@/static/icon/hd-no.png"></image>
					<text>商家活动</text>
				</view>
				<view class="item" @click="goApplyPartnerPage">
					<image src="@/static/icon/mxvip-no.png"></image>
					<text>梦想VIP</text>
				</view>
				<view class="item" @click="goWeb('About')">
					<image src="@/static/icon/gy-no.png"></image>
					<text>关于商家活动系统说明</text>
				</view>
				<view class="item" @click="goActivity()">
					<image src="@/static/icon/myhd-no.png"></image>
					<text>我的活动</text>
				</view>
				<view class="item" @click="goReport()">
					<image src="@/static/icon/ts-no.png"></image>
					<text>投诉举报</text>
				</view>
				<view class="item" @click="goTel()">
					<image src="@/static/icon/ts-no.png"></image>
					<text>联系客服</text>
				</view>

				<view class="out" @click="goLogout()">
					<image src="@/static/icon/out.png"></image>
					<text>退出</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		qualification_check_api,
		becomePartner_api,
		partner_baseinfo_api,
		waitingApplyList_api
	} from '@/api/second.js'
	export default {
		data() {
			return {
				is_address: '未设置',
				nav_show: false,
				status: -1,
				parterInfo: {},
				waterList: [],
				reject_reason: '',
				partner_advantage: ''
			};
		},
		filters: {
			verifyStatus(value) {
				const data = {
					0: '未认证',
					1: '审核中',
					2: '认证成功',
					3: '认证失败',
				}
				return data[value]
			}
		},
		onShow() {
			this.getInfo();
			this.checkQ()

		},
		methods: {
			getParterInfo() {
				partner_baseinfo_api().then(res => {
					this.parterInfo = res.data
				})
			},
			getList() {
				waitingApplyList_api().then(res => {
					this.waterList = res.data
				})
			},
			becomePartner() {
				becomePartner_api().then(res => {
					this.$u.toast('已成为梦想VIP')
					setTimeout(() => {
						this.checkQ()
						this.getList()
					}, 500)
				})
			},
			checkQ() {
				qualification_check_api().then(res => {
					this.status = +res.data.status
					if (this.status == 2) {
						this.reject_reason = res.data.reject_reason
					}
				}).catch(err => {
					console.log(err);
					if (err.data.msg.includes('没有申请')) {
						this.status = -1
						this.partner_advantage = err.data.data.partner_advantage
					}
					if (err.data.msg.includes('已经是合伙人')) {
						this.status = 3
						this.getParterInfo()
						this.getList()
					}
				})
			},
			apply() {
				uni.navigateTo({
					url: '/pages/second/partner'
				})
			},
			contartCustomer() {
				uni.navigateTo({
					url: '/pages/index/wechat'
				})
			},
			getInfo() {
				this.$API.getUserAddress().then(res => {
					if (res.data.delivery_phone != '') {
						this.is_address = '';
					}
				})
			},
			goWhere(e) {
				console.log(e);
			},
			goLogout() {
				this.$u.vuex('vuex_user', {});
				this.$u.vuex('vuex_token', '');
				this.nav_show = false;
				uni.navigateTo({
					url: '/pages/index/index'
				})
			},
			goShop() {
				uni.navigateTo({
					url: '/pages/merchant/index'
				})
			},
			goMy() {
				if (this.vuex_token != '') {
					uni.navigateTo({
						url: '/pages/my/index'
					})
				}
			},
			goActivity() {
				if (this.vuex_token != '') {
					this.nav_show = false;
					uni.navigateTo({
						url: '/pages/my/activity'
					})
				}
			},
			goReport() {
				this.nav_show = false;
				uni.navigateTo({
					url: '/pages/index/report'
				})
			},
			goTel() {
				uni.navigateTo({
					url: '/pages/index/wechat'
				})
				// uni.makePhoneCall({
				//     phoneNumber: this.vuex_theme.tel
				// })
			},
			goLogout() {
				uni.setStorageSync('lifeData', {})
				this.$u.vuex('vuex_user', {});
				this.$u.vuex('vuex_token', '');
				this.nav_show = false;
				uni.navigateTo({
					url: '/pages/index/index'
				})
			},
			goWeb(type) {
				if (type == 'Index') {
					uni.navigateTo({
						url: '/pages/index/index'
					})
				} else if (type == 'Shop') {
					if (this.vuex_user.is_shop == 1) {
						uni.navigateTo({
							url: '/pages/activity/index'
						})
					} else {
						uni.navigateTo({
							url: '/pages/activity/login'
						})
					}
				} else {
					uni.navigateTo({
						url: '/pages/index/web?type=' + type
					})
				}
				this.nav_show = false;
			},
			onClose() {
				this.nav_show = false;
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 670rpx;
		margin: 0 auto;
	}

	.logo {
		@include flex;
		align-items: center;
		margin-top: 32rpx;
		justify-content: space-between;

		.s1 {
			@include flex;
			align-items: center;

			image {
				width: 80rpx;
				height: 80rpx;
				margin-right: 24rpx;
			}

			text {
				height: 80rpx;
				font-size: 40rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 700;
				color: #3D3D3D;
				line-height: 80rpx;
			}
		}

		.s2 {
			@include flex;
			align-items: center;

			image {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
			}

			text {
				position: relative;
				height: 28rpx;
				font-size: 28rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 500;
				color: #7677EB;
				line-height: 28rpx;
				padding-left: 40rpx;

				&:before {
					position: absolute;
					content: "";
					width: 2rpx;
					height: 32rpx;
					background-color: #C0CBD8;
					left: 20rpx;
					top: 0;
				}
			}
		}
	}

	.my-ava {
		@include flex(column);
		margin-top: 48rpx;
		align-items: center;

		.image {
			width: 164rpx;
			height: 164rpx;
			border-radius: 100%;
		}

		.s1 {
			@include flex;
			justify-content: center;
			width: 670rpx;
			margin-top: 40rpx;

			text {
				font-size: 36rpx;
				color: #110202;
				height: 36rpx;
				line-height: 36rpx;

				&:nth-child(2) {
					margin-left: 34rpx;
					color: #7677EB;
					font-size: 28rpx;
				}
			}
		}

		.s2 {
			height: 36rpx;
			font-size: 28rpx;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: 400;
			color: #7D8592;
			line-height: 36rpx;
			margin-top: 20rpx;
		}
	}

	.nav {
		width: 566rpx;
		padding: 52rpx 52rpx 27rpx 52rpx;
		background-color: #fff;
		border-radius: 48rpx;
		margin-top: 52rpx;

		.title {
			height: 48rpx;
			font-size: 40rpx;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: 600;
			color: #0A1629;
			line-height: 48rpx;
			margin-bottom: 32rpx;
		}

		/deep/ .u-cell {
			&__body {
				padding: 30rpx 0;

				&__content {}
			}

			&__title {
				&-text {
					font-size: 30rpx;
					color: #7D8592;
				}
			}

			&__value {
				font-size: 24rpx;
				color: #7D8592;
			}
		}
	}

	.shop {
		width: 566rpx;
		height: 48rpx;
		padding: 52rpx;
		margin: 52rpx auto 0 auto;
		@include flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		border-radius: 48rpx;

		.s1 {
			height: 48rpx;
			font-size: 40rpx;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: 600;
			color: #0A1629;
			line-height: 48rpx;
		}

		/deep/ .u-icon {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.nav1 {
		width: 430rpx;
		height: 98vh;
		background-color: #FFFFFF;
		padding-left: 32rpx;
		border-radius: 48rpx;
		margin-top: 1vh;
		position: relative;

		.title {
			height: 80rpx;
			@include flex;
			align-items: center;
			margin-top: 52rpx;
			margin-bottom: 70rpx;

			image {
				width: 60rpx;
				height: 60rpx;
				margin-right: 24rpx;
			}

			text {
				height: 60rpx;
				font-size: 36rpx;
				font-weight: 700;
				color: #3D3D3D;
				line-height: 60rpx;
			}
		}

		.item {
			width: 358rpx;
			height: 48rpx;
			@include flex;
			align-items: center;
			padding: 20rpx 16rpx;
			position: relative;

			image {
				width: 48rpx;
				height: 48rpx;
				margin-right: 24rpx;
			}

			text {
				height: 60rpx;
				font-size: 28rpx;
				color: #7D8592;
				line-height: 60rpx;
			}
		}

		.active {
			background-color: rgba(118, 119, 235, 0.10);
			border-radius: 20rpx;

			&::after {
				content: "";
				position: absolute;
				width: 8rpx;
				height: 88rpx;
				background: #7677EB;
				border-radius: 4rpx;
				opacity: 1;
				right: -42rpx;
				top: 0;
			}
		}

		.out {
			position: absolute;
			bottom: 60rpx;
			@include flex;
			align-items: center;

			image {
				width: 48rpx;
				height: 48rpx;
				margin-right: 24rpx;
			}

			text {
				height: 60rpx;
				font-size: 30rpx;
				color: #7D8592;
				line-height: 60rpx;
			}
		}


	}

	.vip {
		width: 566rpx;
		padding: 52rpx;
		margin: 52rpx auto 0 auto;
		margin-bottom: 80rpx;
		@include flex;
		justify-content: space-between;
		flex-direction: column;
		background-color: #fff;
		border-radius: 48rpx;

		.quanyi {
			font-size: 28rpx;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: 400;
			color: #7D8592;

			.text {
				font-size: 28rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 400;
				color: #7D8592;
			}
		}

		.s1 {
			height: 48rpx;
			font-size: 40rpx;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: 600;
			color: #0A1629;
			line-height: 48rpx;
		}

		.desc {
			text-align: center;
			font-size: 30rpx;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: 400;
			color: #0A1629;
		}
	}

	.daishenhe {
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
		font-weight: 400;
		color: #7D8592;
	}

	.pass {
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
		font-weight: 400;
		color: #10CA89;
	}

	.reject {
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
		font-weight: 400;
		color: #EB1A1A;
	}

	.but {
		@include flex;
		margin-top: 60rpx;
		margin-bottom: 60rpx;

		.s2 {
			width: 290rpx;
			height: 96rpx;
			background: #7677EB;
			box-shadow: 0 12rpx 24rpx 0 rgba(63, 140, 255, 0.2637);
			border-radius: 28rpx;
			margin: 0 auto;
			text-align: center;

			text {
				font-size: 30rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 96rpx;
			}
		}
	}

	.handles {
		position: relative;

		&::before {
			top: 50%;
			left: -20rpx;
			transform: translateY(-50%);
			position: absolute;
			content: '';
			width: 12rpx;
			height: 12rpx;
			background: #7677EB;
			opacity: 1;
			border-radius: 50%;
		}
	}
</style>